import React from 'react'
import { error, Select, RadioGroup, Button, Link,  Input, Switch, Checkbox } from '../../../ui-components'
import style from './style.singlePick'
import BaseEdit, { Base } from './BaseEdit'
import BasePreview from './BasePreview'
import util from '../../../util'

class Edit extends Base {

	state = {
		add: '',
		pickOptionMap: {},
		isDefault: 0
	}

	addPickOption() {
		if (this.isDuplicate(this.state.add)) {
			return this.refs.addInput.error('名称不能重复')
		}
		 if (util.isNull(this.state.add)) return this.refs.addInput.error('名称不能为空')

		if (this.state.isDefault) {
			this.props.updateProfileTemplateFieldDetail({ 
				pickOptions: [
					...this.props.pickOptions.map(item => ({
						...item,
						isDefault: 0
					})),
					{
						optionValue: this.state.add,
						isDefault: 1
					}
				]
			})
		} else {
			this.props.updateProfileTemplateFieldDetail({ 
				pickOptions: [
					...this.props.pickOptions,
					{
						optionValue: this.state.add,
						isDefault: 0,
						edit: false
					}
				]
			})
		}

		this.setState({ add: '', isDefault: 0 })
		this.refs.addInput.reset()
	}

	toggleEditPickOption(i) {
		this.props.updateProfileTemplateFieldDetail({ 
			pickOptions: this.props.pickOptions.map((item, index) => {
				if (index == i) {
					if (!item.edit) {
						this.setState({
							pickOptionMap: {
								...this.state.pickOptionMap,
								[i]: {
									...this.state.pickOptionMap[i],
									optionValue: item.optionValue,
									isDefault: item.isDefault
								}
							}
						})
					}
					return {
						...item,
						edit: !item.edit
					}
				}
				return {
					...item,
					edit: false
				}
			})
		})
	}

	updatePickOptionMap(arg, i) {
		this.setState({
			pickOptionMap: {
				...this.state.pickOptionMap,
				[i]: {
					...this.state.pickOptionMap[i],
					...arg
				}
			}
		})
	}

	deletePickOption(i) {
		this.props.updateProfileTemplateFieldDetail({
			pickOptions: this.props.pickOptions.filter((_, index) => i != index)
		})
	}

	updatePickOption(i) {
		const { optionValue, isDefault } = this.state.pickOptionMap[i]

		if (this.props.pickOptions.some((item, index) => index != i && item.optionValue == optionValue)) {
			error('名称不能重复')
			return
		}
		if (util.isNull(optionValue)) return error('名称不能为空')

		this.props.updateProfileTemplateFieldDetail({ 
			pickOptions: this.props.pickOptions.map((item, index) => {
				if (index == i) {
					return {
						...item,
						...this.state.pickOptionMap[i]
					}
				}
				if (isDefault) {
					return {
						...item,
						isDefault: 0
					}
				}
				return item
			})
		})

		setTimeout(() => {
			this.toggleEditPickOption(i)
		}, 0)
	}

	isDuplicate(optionValue) {
		return this.props.pickOptions.some(item => item.optionValue == optionValue)
	}

	renderPickOptions() {
		let { pickOptions=[] } = this.props
		if (!pickOptions.length) return null
    pickOptions = pickOptions.filter(v => v.isDeprecated != 1)
		return (
			<ul>
				{
					pickOptions.map((item, i) => {
						if (item.edit) return (
							<div className={style.update} key={i}>
								<div>
									<input 
										onChange={(e) => ::this.updatePickOptionMap({ optionValue: e.target.value }, i)}
										autoFocus 
										value={this.state.pickOptionMap[i].optionValue}/>
									<Button className={style['update-btn']} label="更新" onClick={() => ::this.updatePickOption(i)}/>
									<Link color="red" label="删除" onClick={() => ::this.deletePickOption(i)}/>
									<Link label="取消" onClick={() => ::this.toggleEditPickOption(i)}/>
								</div>
								<Checkbox label="默认" active={this.state.pickOptionMap[i].isDefault} onClick={() => ::this.updatePickOptionMap({ isDefault: 1-this.state.pickOptionMap[i].isDefault }, i)}/>
							</div>
						)
						return (
							<li key={i}>
								<span>{ item.optionValue }</span>
								<Link className={style.edit} icon="edit" onClick={() => ::this.toggleEditPickOption(i)}/>
							</li>
					 )
				 })
			 }
			</ul>
		)
	}

  render() {
		const { isDefault } = this.state
		const {
			isSystemRequired,
			isEdit,
		} = this.props;
		const noControl = isSystemRequired && isEdit;
		return (
			<BaseEdit {...this.state} {...this.props} update={::this.update} noControl={noControl}>
        <div className={style.add}>
					{ this.renderPickOptions() }
          <div>
						<div style={{width: '140px',marginBottom: '-10px'}}><Input width={140} ref="addInput" value={this.state.add} onChange={(e) => this.setState({add: e.target.value})} className={style.input} placeholder="添加选项"/></div>
						<Checkbox active={isDefault} label="默认" onClick={() => this.setState({ isDefault: 1-this.state.isDefault })}/>
            <Button onClick={::this.addPickOption} label="添加"/>
          </div>
        </div>
			</BaseEdit>
		)
  }
}

class Preview extends React.Component {
  render() {
		let { pickOptions=[] } = this.props
    const selected = pickOptions.filter(item => item.isDefault)[0]
    pickOptions = pickOptions.filter(v => v.isDeprecated != 1)
    return (
			<BasePreview>
				{
					pickOptions.length?
					<Select label={this.props.labelValue || '单行文本'} onChange={() => {}} className={style.select} value={selected && selected.optionValue}>
						{ 
							pickOptions.map((v, i) => <option key={i} value={v.optionValue}>{ v.optionValue }</option>) 
						}
					</Select>: null
				}
			</BasePreview>
    )
  }
}

export default {
  Edit,
  Preview
}
